<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
   
</head>
<body>  
    <!-- 组件之间的通信 子传父 -->
    <div id="app">
        <child-com @myevent="getMsg"></child-com>
    </div>
    <script>
        // 通过在子组件内部触发一个事件，然后分发一个自定义事件，里面带有要传递的数据，在组件的实例中监听自定义的事件，在父组件中通过一个获取数据的方法得到
        Vue.component("childCom",{
            template:` 
                <div>
                    <button @click="sendMsg"> sendMsg </button>
                </div>    
            `,
            data(){
                return {
                    Msg:"Hello world"
                }
            },
            methods: {
                sendMsg(){
                    this.$emit("myevent",this.Msg)
                }
                
            }
        })
        var app = new Vue({
            el: "#app",
            data: {
                sendMsg:"hello world"
            },
            methods: {
                getMsg(val){
                    console.log(val)
                }
            }
        });
    </script>
</body>
</html>